<template>
  <div class="good-sup-list">
    <PageTop firstMenu="商品分类" secondMenu="商品管理" title="配料清单" @add-thing="changeChild"></PageTop>

    <el-button class="back" size="small" plain type="info" @click="back">返回</el-button>

    <div class="search-container">
      <el-input size="small" class="search" clearable v-model="keyword" placeholder="输入配料编号/名称关键字搜索"></el-input>
      <el-button plain size="small" type="primary" @click="getData">查询</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :border="true"
      :fit="true"
      :stripe="true"
      size="mini"
      ref="table"
      align="center"
      @selection-change="handleSelectionChange">

      <el-table-column
      
      type="selection"
      width="45"></el-table-column>

      <el-table-column
        prop="id"
        label="id"
        min-width="100"
        align="center">
      </el-table-column>

      <el-table-column
        prop="material_number"
        label="配料编码"
        min-width="180"
        align="center">
      </el-table-column>

      <el-table-column
        prop="material_name"
        label="配料名称"
        min-width="180"
        align="center">
      </el-table-column>

      <el-table-column
        prop="material_format"
        label="配料规格"
        min-width="120"
        align="center">
      </el-table-column>

      <el-table-column
        prop="material_unit"
        label="配料单位"
        min-width="120"
        align="center">
      </el-table-column>

      <el-table-column 
      label="数量"
      min-width="180"
      align="center">
        <template slot-scope="scope">
          <!-- <el-input 
          v-model="scope.row.inCount" 
          placeholder="输入入库数量"></el-input> -->
          <el-button
            size="mini"
            type="primary"
            plain
            @click="countChange(scope.row)">{{scope.row.number}}</el-button>
        </template>
      </el-table-column>

      <el-table-column label="操作"
      min-width="180"
      align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            plain
            type="danger"
            @click="tableDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="page-wrap">
      <el-pagination 
      class="page-count" 
      @current-change="getData" 
      background 
      layout="total, prev, pager, next" 
      :total="totalCount" 
      :current-page.sync='page' 
      :page-size="15"></el-pagination>
    </div>
    
    <deleteConfirm v-if="showMask" @closeDelete="closeDelete" @deleteConfirm="deleteConfirm"></deleteConfirm>
    <deleteConfirm v-if="showMask2" @closeDelete="closeDelete2" @deleteConfirm="deleteConfirm2"></deleteConfirm>

    <childTable :id="id" v-show="showChild" @confirm="addTable" @close="closeChild"></childTable>

    <div class="batchStatus">
      <el-button size="small" plain type="primary" @click="chonseAll" v-text="selectAll?'取消':'全选'"></el-button>
      <el-button size="small" plain type="danger" @click="delAll">删除所选</el-button>
    </div>

    <el-dialog v-if="changeNum" title="数量调整" center :visible="true" width="400px" @close="changeNum=false">
        <el-input size="small" class="search" clearable v-model="num" placeholder="请输入数量"></el-input>
        <span slot="footer" class="dialog-footer">
        <el-button @click="changeNum=false">取 消</el-button>
        <el-button type="primary" @click="countConfirm">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Prop, Component, Emit } from 'vue-property-decorator';
import PageTop from '@/components/pageTop.vue';
import tableList from '@/tables/supplier/supplierListTable.vue';
import AjaxResquest from '@/api/apiRequest';
import childTable from '@/tables/goods/goodSupListChild.vue';
import deleteConfirm from '@/components/deleteConfirm.vue';

@Component({
  components: {
    PageTop,
    tableList,
    childTable,
    deleteConfirm
  }
})
export default class GoodSupList extends Vue {
  dataRes!: AjaxResquest;
  deleteRes!: AjaxResquest;
  createRes!: AjaxResquest;
  numRes!: AjaxResquest;

  tableData: any[] = [];
  page: number = 1;
  pageSize: number = 15;
  totalCount: number = 0;
  keyword: string = '';
  ajaxData = {
    page: this.page,
    pageSize: this.pageSize
  };
  statuses: any[] = [
    { value: '1', label: '启用' },
    { value: '2', label: '禁用' }
  ];
  id: string = '';
  status: string = '';
  showChild: boolean = false;

  deleteId: string = '';
  showMask: boolean = false;
  showMask2: boolean = false;

  selectAll: boolean = false;
  choseChangeStatus: any[] = [];
  $refs!: any;
  hasSelect: any[] = [];
  changeNum: boolean = false;
  num: number = 0;
  numId: string = '';

  created() {
    this.id = this.$route.query.id;
  }
  mounted() {
    // TODO
    this.createRes = new AjaxResquest('/goods/addMaterials');
    this.dataRes = new AjaxResquest('/goods/getAterialsGoodsInfosList');
    this.deleteRes = new AjaxResquest('/goods/delMaterialsList');
    this.numRes = new AjaxResquest('/goods/updateMaterialsListNumebr');

    this.getData();
  }
  countChange(row: any) {
    this.num = row.number;
    this.numId = row.id;
    this.changeNum = true;
  }
  countConfirm() {
    this.numRes
      .getFunction({ number: this.num, materialsListId: this.numId })
      .then((res: any) => {
        if (res.data.code === 1) {
          this.changeNum = false;
          this.getData();
        }
      });
  }
  pageChange(val: number): void {
    this.getData();
  }
  back() {
    this.$router.back();
  }
  changeChild() {
    this.showChild = true;
  }
  closeChild() {
    this.showChild = false;
  }
  addTable(val: any) {
    let temp = val;
    let tempData: any[] = [];
    temp.map((i: any) => {
      let data = {
        materials_id: i.id,
        format_id: i._models_id
      };
      tempData.push(data);
    });

    this.createRes
      .getFunction({ goodsId: this.id, arrId: JSON.stringify(tempData) })
      .then((res: any) => {
        if (res.data.code === 1) {
          console.log(res.data.data);
          this.getData();
          this.showChild = false;
        }
      });
  }
  tableDelete(row: any) {
    this.deleteId = row.id;
    this.showMask = true;
  }
  closeDelete(row: object) {
    this.showMask = false;
  }
  closeDelete2(row: object) {
    this.showMask2 = false;
  }
  deleteConfirm() {
    if (this.selectAll) {
      let temp = this.choseChangeStatus;
      this.deleteRes.getFunction({ id: JSON.stringify(temp) }).then((res:any) => {
        if (res.data.code === 1) {
          this.getData();
          this.showMask = false;
        }
      });
    } else {
      this.deleteRes.getFunction({ id: this.deleteId }).then((res:any) => {
        if (res.data.code === 1) {
          this.getData();
          this.showMask = false;
        }
      });
    }
  }
  chonseAll() {
    this.selectAll = !this.selectAll;
    if (this.selectAll) {
      this.tableData.forEach(i => {
        this.$refs.table.toggleRowSelection(i);
      });
    } else {
      this.$refs.table.clearSelection();
    }
    this.tableData.map(i => {
      this.choseChangeStatus.push(i.id);
    });
    console.log(this.choseChangeStatus);
  }
  delAll() {
    this.showMask2 = true;
    // this.showMask = true;
  }
  handleSelectionChange(val: any) {
    this.hasSelect = val;
  }
  deleteConfirm2() {
    console.log('123213213131233231');
    // return
    let temp: any[] = [];
    this.hasSelect.map(i => {
      temp.push(i.id);
    });
    this.deleteRes.getFunction({ id: JSON.stringify(temp) }).then((res:any) => {
      if (res.data.code === 1) {
        this.getData();
        this.showMask2 = false;
      }
    });
  }
  getData() {
    let data = {
      page: this.page,
      pageSize: this.pageSize,
      goodsId: this.id
    };
    this.dataRes.getFunction(data).then((res:any) => {
      if (res.data.code === 1) {
        this.tableData = res.data.data.types;
        this.totalCount = res.data.data.allCount;
      }
    });
  }
}
</script>
<style lang="less">
.good-sup-list {
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
  text-align: left;
  position: relative;
  .back {
    position: absolute;
    right: 25px;
    top: 25px;
  }
  .page-count-wrap {
    position: absolute;
    bottom: 25px;
    right: 25px;
  }
  .search-container {
    // display: flex;
    text-align: left;
    height: 32px;
    margin: 0px 10px 15px 0;
    .search {
      width: 250px;
      margin-right: 10px;
    }
  }
  .bottom-margin {
    margin-bottom: 15px;
  }
  .batchStatus {
    position: absolute;
    bottom: 15px;
    left: 15px;
  }
}
</style>
